<div nz-dropdown [nzDropdownMenu]="membersDropdown" [nzOverlayClassName]="'custom-shadow'" [nzClickHide]="false"
     [nzTrigger]="'click'"
     (nzVisibleChange)="handleMembersVisibleChange($event)" class="w-100 h-100 d-flex align-items-center"
     #tr>
  <div class="d-flex">
    <worklenz-avatars
      *ngIf="service.model.task?.names?.length"
      [names]="service.model.task?.names || []"
      class="d-flex cursor-pointer  kanban-avatars"
    ></worklenz-avatars>
    <nz-avatar [nzSize]="24" class="avatar-dashed ms-1 bg-white" [nzIcon]="'plus'"></nz-avatar>
  </div>
</div>

<nz-dropdown-menu #membersDropdown="nzDropdownMenu">

  <nz-spin *ngIf="!taskListService.members" nzSimple [nzIndicator]="indicatorTemplate"></nz-spin>

  <div class="bg-white px-3 py-2 border-bottom">
    <input type="text" [(ngModel)]="searchText" (keydown.enter)="selectLastValue($event)" placeholder="Search by name"
           nz-input #memberSearchInput>
  </div>

  <ul class="members-dropdown" style="box-shadow: none;min-width:300px;" *ngIf="taskListService.members"
      nz-menu>
    <!-- <li class="px-3 py-2">
      <input type="text" [(ngModel)]="searchText" placeholder="Search by name" nz-input #memberSearchInput>
    </li> -->
    <li class="m-0"
        (nzCheckedChange)="handleMemberChange(item, $event)"
        *ngFor="let item of (taskListService.members || []) | searchByName: searchText; trackBy: trackById"
        [(nzChecked)]="item.selected"
        [nzDisabled]="item.is_pending && !item.selected"
        [ngClass]="item.is_pending && !item.selected ? 'disable' : ''"
        nz-checkbox
        nz-menu-item>
      <div class="d-flex align-items-center justify-content-center user-select-none">
        <nz-avatar
          nz-tooltip
          [nzSize]="28"
          [nzText]="item.name | firstCharUpper"
          [nzTooltipTitle]="item.name"
          [style.background-color]="item.avatar_url ? '#ececec' : item.color_code"
          [nzSrc]="item.avatar_url"
          [nzTooltipPlacement]="'top'"
          class="mt-auto mb-auto me-2"
        ></nz-avatar>
        <div style="line-height: 15px;">
          <span class="d-block" nz-typography>{{item.name}}</span>
          <small nz-typography [nzType]="'secondary'">
            {{item.email}} <small *ngIf="item.is_pending" nz-typography nzType="danger">(Pending Invitation)</small>
          </small>
        </div>
      </div>
    </li>
  </ul>
  <button *ngIf="isOwnerOrAdmin" nz-button nzType="link" (click)="onInviteClick()" class="border-top bg-white w-100">
    <span nz-icon nzType="usergroup-add" nzTheme="outline"></span> Invite a new member by email
  </button>
  <div class="bg-white text-end align-items-center p-2 border-top"
       [class.justify-content-between]="isOwnerOrAdmin"
       [class.justify-content-end]="!isOwnerOrAdmin"
  >
    <!-- <button *ngIf="isOwnerOrAdmin" nz-button nzType="dashed" nzSize="small" (click)="onInviteClick()">
      <span nz-icon nzType="usergroup-add" nzTheme="outline"></span> Invite a new member by email
    </button> -->
    <button nz-button nzType="primary" nzSize="small" (click)="closeDropdown()">OK</button>
  </div>
</nz-dropdown-menu>

<ng-template #indicatorTemplate><span nz-icon nzType="loading"></span></ng-template>
